<template>
	<view class="">
		<view class="header">
			<!-- 轮播图1111-->
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" interval="4000" duration="800"
				indicator-active-color="#fff">
				<block v-for="(item,index) in bannerData" :key="index">
					<swiper-item>
						<navigator class="slide-nav">
							<image :src="https+item.picturePath" class="slide-image" />
						</navigator>
					</swiper-item>
				</block>
			</swiper>
			<!-- /轮播图 1111-->
		</view>
		<view>
			<u-tabs :list="newsType" :is-scroll="false" active-color="#002B56" :current="current" @change="tabChange">
			</u-tabs>
		</view>
		<view class="page">
			<view @click="newsDetail(item.articleId)" class="_flex dataList align-items_center"
				v-for="(item,index) in dataList" :key="index">
				<image :src="https+item.mainPicture" mode="widthFix">
				</image>
				<view class="news-wrap" style="width: 500rpx;">
					<view style="font-weight: bold;">
						{{item.articleTitle}}
					</view>
					<view class="_flex align-items_center _justify_between" style="color: #888;height: 55rpx;">
						<view class="">
							<u-icon name="eye" size="36"></u-icon>
							<text style="margin-left: 6rpx;">{{item.aPageviews}}</text>
						</view>
				<!-- 		<view class="">
							<u-icon name="chat" size="36"></u-icon>
							<text style="margin-left: 6rpx;">{{item.commentsNums}}</text>
						</view> -->
						<view class="">
							<u-icon name="thumb-up" size="36"></u-icon>
							<text style="margin-left: 6rpx;">{{item.aLikes}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-loadmore :status="status" :load-text="loadText" />
	</view>
</template>
<script>
	import API from "@/api/news.js"
	export default {
		name: "newsList",
		created() {
			this.getBanner();
			this.getNewsType();
		},
		onLoad() {

		},
		onReachBottom() {
			uni.showLoading({
				title: this.status,
			});
			this.status = 'loading';
			this.page = this.page + 1;
			
			let data = {
				page: this.page,
				limit: 5,
				articleTypeId: this.articleTypeId
			}
			API.getNewsList(data).then(res => {
				console.log(res);
				this.dataList = this.dataList.concat(res.data)
				this.count = res.count;
				
			})
			if(this.page * this.limit >= this.count){
				this.status = 'nomore';
			}
			else{
				this.status = 'loadmore';
			}
			
		},
		data() {
			return {
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				count:0,
				https: getApp().globalData.picturePath,
				bannerData: [],
				current: 0,
				articleTypeId: "",
				newsType: [],
				dataList: [],
				status: 'loadmore',
				list: 1,
				page: 1,
				limit:5,
			};
		},
		methods: {
			getBanner() {
				let data = {
					position: 2
				}
				API.getBanner(data).then(res => {
					console.log(res.data);
					this.bannerData = res.data.map(val => {
						val.picturePath = this.picturePath;
					})
				})
			},
			getNewsType() {
				var that = this;
				API.getNewsType().then(res => {
					that.newsType = res.data;
					that.articleTypeId = that.newsType[that.current].articleTypeId;
					console.log(that.page);
					that.getNewsList(that.articleTypeId, that.page)
				})
			},
			getNewsList(articleTypeId, page) {
				console.log(page);
				let data = {
					page: page,
					limit: 5,
					articleTypeId: articleTypeId
				}
				API.getNewsList(data).then(res => {
					console.log(res);
					this.dataList = res.data;
					this.count = res.count;
					
				})
				if(page * this.limit >= this.count){
					this.status = 'nomore';
				}
				else{
					this.status = 'loadmore';
				}
			},

			tabChange(index) {
				this.current = index;
				this.articleTypeId = this.newsType[this.current].articleTypeId;
				this.getNewsList(this.articleTypeId,this.page)
			},
			newsDetail(articleId) {
				uni.navigateTo({
					url: './newsDetail?articleId=' + articleId
				})
			},
		}
	};
</script>
<style scoped>
	/**轮播图*/
	.swiper {
		width: 100%;
		height: 300rpx;
		margin: 0px;
	}

	.slide-nav {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.slide-image {
		width: 100%;
		height: 300rpx;
	}

	.dataList {
		padding: 12px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}
	
	.dataList image{
		width: 180rpx;
		height: 135rpx;
		border-radius: 3px;
	}

	.news-wrap {
		margin-left: 20rpx;
		line-height: 45rpx;
		color: #333333;
	}
    .page{ margin-bottom: 30rpx;}
</style>
